<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3752316_psr830zruy.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="javascripts/lazyload.js"></script>
</head>
<body>
    <!-- 苏宁顶部结构 -->
    <div class="top-con">
        <div class="top-wap">
            <div class="top-left">
                <div class="box menuBox">
                    <b>网站导航</b>
                    <i class="iconfont icon-xiala"></i>
                    <div class="top-menu"></div>
                </div>
                <div class="box menuBox">
                    <b>商家入驻</b>
                    <i class="iconfont icon-xiala"></i>
                    <div class="top-menu"></div>
                </div>
                <div class="box menuBox">
                    <b>客户服务</b>
                    <i class="iconfont icon-xiala"></i>
                    <div class="top-menu"></div>
                </div>
                <div class="box">
                    <b>网页无障碍</b>
                </div>
                <div class="box">
                    <i class="iconfont icon-dingwei"></i>
                    <b>大连</b>
                    <i class="iconfont icon-icon_sanjiaoxing"></i>
                </div>
            </div>
            <div class="top-right">
                <div class="box">
                    <b>请登录</b>
                </div>
                <div class="box register">
                    <b>注册有礼</b>
                </div>
                <div class="box menuBox">
                    <b>我的订单</b>
                    <i class="iconfont icon-xiala"></i>
                    <div class="top-menu"></div>
                </div>
                <div class="box menuBox">
                    <b>我的易购</b>
                    <i class="iconfont icon-xiala"></i>
                    <div class="top-menu"></div>
                </div>
                <div class="box">
                    <b>苏宁会员</b>
                </div>
                <div class="box shoppingCart menuBox">
                    <span class="iconfont icon-gouwuchekong"></span>
                    <b>购物车</b>
                    <b>0</b>
                    <i class="iconfont icon-xiala"></i>
                    <div class="top-menu"></div>
                </div>
                <div class="box">
                    <b>易付宝</b>
                </div>
                <div class="box">
                    <b>企业采购</b>
                </div>
                <div class="box menuBox-right">
                    <b>手机苏宁</b>
                    <i class="iconfont icon-xiala"></i>
                    <div class="top-menu-right"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 苏宁头部部分 -->
    <div class="header-con">
        <div class="header-wap">
            <div class="header-box">
                <a href="index.html" title="苏宁易购logo">
                    <img src="https://image1.suning.cn/uimg/cms/img/159642507148437980.png" alt="">
                </a>
            </div>

            <div class="search">
                <div class="search-input">
                    <i class="iconfont icon-Fangdajing"></i>
                    <input class="search_ipt" type="text" placeholder="爆款每1000减100">
                    <ul class="search_list"></ul>
                    <button>搜索</button>
                    <div class="moreList">
                        <a href="">手机</a>
                        <a href="">冰箱</a>
                        <a href="">电视</a>
                        <a href="">ipad</a>
                        <a href="">热水器</a>
                        <a href="">沙发</a>
                        <a href="">电饭煲</a>
                        <a href="">电动车</a>
                        <a href="">茅台</a>
                        <a href="">尿不湿</a>
                        <a href="">红枣</a> 
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 苏宁头部导航部分 -->
    <div class="header-nav-con">
        <div class="header-nav-wrapper">
            <div class="nav-left">
                <a href="">
                    <i style="background-position: -928px 0;"></i>
                    <span>分类</span>
                </a>
            </div>
            <div class="left-list-wrapper">
                <div class="left-list-box">
                    <ul class="list_ul">
                        <li data-index="0">
                            <img src="https://image3.suning.cn/uimg/cms/img/165820999949428390.png" alt="">
                            <a href="">空调</a>
                            <em>/</em>
                            <a href="">冰箱</a>
                            <em>/</em>
                            <a href="">洗衣机</a>
                        </li>
                        <li data-index="1">
                            <img src="https://image2.suning.cn/uimg/cms/img/165820997761848075.png" alt="">
                            <a href="">电视</a>
                            <em>/</em>
                            <a href="">视听影音</a>
                        </li>
                        <li data-index="2">
                            <img src="https://image5.suning.cn/uimg/cms/img/165820994320648916.png" alt="">
                            <a href="">手机</a>
                            <em>/</em>
                            <a href="">配件</a>
                            <em>/</em>
                            <a href="">运营商</a>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <div class="details">
                            <li>这是空调内容</li>
                            <li>这是电视内容</li>
                            <li>这是手机内容</li>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="nav-mid">
                <ul>
                    <li>
                        <a href="">
                            <img src="https://image2.suning.cn/uimg/cms/img/161185054090483911.png" alt="">
                        </a>
                    </li>
                    <li><a href="">苏宁家电</a></li>
                    <li><a href="">手机数码</a></li>
                    <li><a href="">苏宁超市</a></li>
                    <li><a href="">家具建材</a></li>
                    <li><a href="">生活家电</a></li>
                    <li><a href="">帮客服务</a></li>
                </ul>
            </div>
            <div class="nav-right">
                <a href="">
                    <img src="https://image1.suning.cn/uimg/cms/img/159525719075727245.png" alt="">
                </a>
            </div>
            <div class="right-list-wrapper">
                <div class="right-list-box">
                    这是右侧列表内容...
                </div>
            </div>
        </div>
    </div>

    <!-- 苏宁轮播图本部分 -->
    <div class="banner-container bg1">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://image1.suning.cn/uimg/cms/img/166781246206720122.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://oss.suning.com/adpp/creative_kit/material/picture/20221104-ec9b54148eac4651a02833444ba95812538d85bf4f534c0c.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://oss.suning.com/adpp/creative_kit/material/picture/20210506-bf20c94bbdda4bd99d9be623d69fd1b6f20b331cd973447c.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    


</body>
</html>